<template>
  <!-- 导航头部组件 -->
  <div class="nav-header">
    <!-- logo区域 -->
    <div class="logo">
      <img src="/img/logo.png" alt="网站Logo" />
    </div>

    <!-- 导航菜单容器 -->
    <div class="nav-menu-container">
      <!-- 首页菜单 -->
      <div class="nav-item">
        <a :href="baseUrl" class="nav-link" :class="{ 'nav-link-active': activeNav === 'index' }" @click="setActiveNav('index')"> 首页 </a>
      </div>

      <!-- 成为捐献者菜单（带下拉） -->
      <div class="nav-item nav-item-with-dropdown" @mouseenter="openDropdown('donors')" @mouseleave="closeDropdown('donors')">
        <a :href="`${baseUrl}/donors`" class="nav-link" :class="{ 'nav-link-active': activeNav === 'donors' }" @click="setActiveNav('donors')">
          成为捐献者
        </a>
        <!-- 下拉菜单 -->
        <div v-show="dropdownState.donors" class="nav-dropdown-menu">
          <a v-for="item in donorsMenu" :key="item.path" :href="item.path" class="dropdown-item" @click.stop>
            {{ item.title }}
          </a>
        </div>
      </div>

      <!-- 成为准父母菜单（带下拉） -->
      <div class="nav-item nav-item-with-dropdown" @mouseenter="openDropdown('parents')" @mouseleave="closeDropdown('parents')">
        <a
          :href="`${baseUrl}/parents-to-be`"
          class="nav-link"
          :class="{ 'nav-link-active': activeNav === 'parents' }"
          @click="setActiveNav('parents')"
        >
          成为准父母
        </a>
        <!-- 下拉菜单 -->
        <div v-show="dropdownState.parents" class="nav-dropdown-menu nav-dropdown-menu-wide">
          <a v-for="item in parentsMenu" :key="item.path" :href="item.path" class="dropdown-item" @click.stop>
            {{ item.title }}
          </a>
        </div>
      </div>

      <!-- 成为合作伙伴菜单 -->
      <div class="nav-item">
        <a :href="`${baseUrl}/partner`" class="nav-link" :class="{ 'nav-link-active': activeNav === 'partner' }" @click="setActiveNav('partner')">
          成为合作伙伴
        </a>
      </div>

      <!-- 常见问题菜单 -->
      <div class="nav-item">
        <a :href="`${baseUrl}/question`" class="nav-link" :class="{ 'nav-link-active': activeNav === 'question' }" @click="setActiveNav('question')">
          常见问题
        </a>
      </div>

      <!-- 关于我们菜单（带下拉） -->
      <div class="nav-item nav-item-with-dropdown" @mouseenter="openDropdown('about')" @mouseleave="closeDropdown('about')">
        <a :href="`${baseUrl}/about`" class="nav-link" :class="{ 'nav-link-active': activeNav === 'about' }" @click="setActiveNav('about')">
          关于我们
        </a>
        <!-- 下拉菜单 -->
        <div v-show="dropdownState.about" class="nav-dropdown-menu">
          <a v-for="item in aboutMenu" :key="item.path" :href="item.path" class="dropdown-item" @click.stop>
            {{ item.title }}
          </a>
        </div>
      </div>

      <!-- 右侧功能区 -->
      <div class="nav-right-area">
        <!-- 国际化语言选择 -->
        <div class="language-selector nav-item-with-dropdown" @mouseenter="openDropdown('lang')" @mouseleave="closeDropdown('lang')">
          <div class="language-current">
            <span class="language-text">CN</span>
            <!-- 下拉箭头 -->
            <svg class="dropdown-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
            </svg>
          </div>
          <!-- 语言下拉菜单 -->
          <div v-show="dropdownState.lang" class="nav-dropdown-menu nav-dropdown-menu-small">
            <a href="#" class="dropdown-item">English</a>
            <a href="#" class="dropdown-item">中文</a>
          </div>
        </div>

        <!-- 用户功能区 -->
        <div class="user-area">
          <div class="user-menu">
            <!-- 用户头像下拉菜单（懒加载） -->
            <component :is="UserDropdownAsync" @command="handleCommand" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
/* -------------------- 懒加载：仅首次 hover 才加载 -------------------- */
import { defineAsyncComponent, shallowRef, ref, onMounted } from 'vue';
import { ElMessageBox } from 'element-plus';

// 异步加载用户下拉组件
const UserDropdownAsync = shallowRef(defineAsyncComponent(() => import('./UserDropdown.vue')));

/* -------------------- 原逻辑保持不变 -------------------- */
// import useAppStore from '@/store/modules/app';
import { useUserStore } from '@/store/modules/user';

const baseUrl = import.meta.env.VITE_APP_OUT_API;
// const appStore = useAppStore();
const userStore = useUserStore();

function toggleSideBar() {
  // appStore.toggleSideBar();
}

function handleCommand(command) {
  console.log(command, 'command');
  if (command === 'logout') logout();
}
function logout() {
  ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      userStore.logout().then(() => {
        location.href = '/index';
      });
    })
    .catch(() => {});
}

/* ---------- 下拉显隐状态（懒加载核心） ---------- */
const dropdownState = ref({
  donors: false,
  parents: false,
  about: false,
  lang: false
});
function openDropdown(key) {
  dropdownState.value[key] = true;
}
function closeDropdown(key) {
  dropdownState.value[key] = false;
}

/* ---------- 导航激活状态 ---------- */
const activeNav = ref('index');
function setActiveNav(nav) {
  activeNav.value = nav;
}

/* ---------- 菜单数据 ---------- */
const donorsMenu = ref([
  { title: '我要捐精', path: `${baseUrl}/sperm` },
  { title: '我要捐卵子', path: `${baseUrl}/egg` },
  { title: '资质认证', path: `${baseUrl}/qualifications` },
  { title: '捐赠流程', path: `${baseUrl}/process` },
  { title: '捐赠选项', path: `${baseUrl}/type` }
]);
const parentsMenu = ref([
  { title: '生育融资', path: `${baseUrl}/type` },
  { title: '选择捐赠方式', path: `${baseUrl}/method` },
  { title: '匹配过程', path: `${baseUrl}/match` },
  { title: '哪些人需要精卵捐赠', path: `${baseUrl}/need` },
  { title: '冷冻捐赠vs新鲜捐赠', path: `${baseUrl}/fresh-frozen` },
  { title: '如何订购精子卵子', path: `${baseUrl}/order` },
  { title: '申请访问捐赠者数据库', path: `${baseUrl}/type` }
]);
const aboutMenu = ref([
  { title: '管理团队', path: `${baseUrl}/management` },
  { title: '医疗团队', path: `${baseUrl}/medical` },
  { title: '认证与许可', path: `${baseUrl}/authentication` },
  { title: '我们的优势', path: `${baseUrl}/advantage` }
]);

/* ---------- 挂载时根据 url 设置激活 ---------- */
onMounted(() => {
  const path = window.location.pathname;
  if (path.includes('donors')) activeNav.value = 'donors';
  else if (path.includes('parents-to-be')) activeNav.value = 'parents';
  else if (path.includes('partner')) activeNav.value = 'partner';
  else if (path.includes('question')) activeNav.value = 'question';
  else if (path.includes('about')) activeNav.value = 'about';
});
</script>

<style scoped lang="scss">
/* ---------- 样式与原文完全一致，仅把 hover 显示改为 v-show ---------- */
.nav-header {
  width: 74vw;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 11.11vh;
  min-height: 4rem;
  padding: 0.9375rem 0;
  position: relative;
  z-index: 100;
}
.logo img {
  display: block;
  height: auto;
  max-height: 2.5rem;
  width: auto;
}
.nav-menu-container {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.nav-item {
  position: relative;
}
.nav-item-with-dropdown:hover .nav-dropdown-menu {
  transform: translateY(0);
}
.nav-link {
  font-size: 1.125rem;
  color: #333;
  text-decoration: none;
  padding: 0.5rem 0.75rem;
  white-space: nowrap;
  transition: color 0.3s ease;
  &:hover {
    color: #2b5cab;
  }
  &.nav-link-active {
    color: #2b5cab;
    border-bottom: 0.125rem solid #2b5cab;
  }
}
.nav-dropdown-menu {
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 0.5rem;
  background: #fff;
  border: 0.0625rem solid #e5e7eb;
  border-radius: 0.375rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  padding: 0.5rem 0;
  transition: all 0.3s ease;
  z-index: 1000;
  min-width: 12.5rem;
  &.nav-dropdown-menu-wide {
    min-width: 15rem;
  }
  &.nav-dropdown-menu-small {
    min-width: 6.25rem;
  }
}
.dropdown-item {
  display: block;
  padding: 0.75rem 1.25rem;
  font-size: 1rem;
  color: #374151;
  white-space: nowrap;
  transition: all 0.2s ease;
  &:hover {
    background: #f0f4ff;
    color: #2b5cab;
  }
}
.nav-right-area {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.language-selector {
  position: relative;
  cursor: pointer;
  &:hover .dropdown-arrow {
    transform: rotate(180deg);
  }
}
.language-current {
  display: flex;
  align-items: center;
  font-size: 1.125rem;
  padding: 0.5rem 0.75rem;
}
.dropdown-arrow {
  width: 1rem;
  height: 1rem;
  margin-left: 0.5rem;
  transition: transform 0.3s ease;
}
.user-avatar-dropdown .avatar-image {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  object-fit: cover;
  cursor: pointer;
  border: 0.125rem solid #e5e7eb;
}
</style>
